<template>
  <section class="container clearfix" v-if="result">
    <div class="content-wrap clearfix">
      <div class="content">
        <article class="excerpt clearfix" :class="{'excerpt-img':item.articles_img}"  v-for="(item,index) in result.data.articles" :key="item+index">
          <div class="excerpt-img-box" v-if="item.articles_img">
            <nuxt-link :to="`/articles/${item.id}`" class="excerpt-img-href" >
              <img :src="item.articles_img" alt="">
            </nuxt-link>
          </div>
          <header>
            <nuxt-link class="label" :to="`/category/${item.category_id}`">{{item.category_name}}</nuxt-link>
            <h2><nuxt-link :to="`/articles/${item.id}`">{{item.title}}</nuxt-link></h2>
          </header>
          <p>
            <span class="muted"><i class="blogicon">&#xe604;</i>{{item.read_num}}阅读</span>
            <span class="muted"><i class="blogicon">&#xe61b;</i>{{moment(item.created_at).fromNow()}}</span>
            <span class="muted"><i class="blogicon">&#xe613;</i>{{item.comment_num}}评论</span>
          </p>
          <p class="note">{{item.introduction}}</p>
        </article>
        <div class="pagination" v-if="result.data.pageCount>1">
           <ul>
             <li v-for="(item,index) in result.data.pageCount" :key="item+index">
               <nuxt-link v-if="item != result.data.curPage" :to="{name:'articles',query:{page:item}}" >{{item}}</nuxt-link>
               <span v-else>{{item}}</span>
             </li>
           </ul>
        </div>
      </div>
    </div>
    <my-right :tags="result.data.tags"></my-right>
  </section>
</template>

<script>
import axios from "~/plugins/axios";
import MyRight from "~/components/Right.vue";
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  asyncData({ params, query, error, redirect }) {
    if (!params.id || params.id==0) {
      redirect("/");
      return { result: null };
    } else {
      let url = `/api/allData?category_id=${params.id}`;
      if (query.page) {
        url = `${url}&page=${+query.page?query.page:1}`;
      }
      return axios
        .get(url)
        .then(resp => {
          let { data } = resp;
          return { result: data };
        })
        .catch(e => {
          error({ statusCode: 500, message: `${e}` });
        });
    }
  },
  components: {
    MyRight
  }
};
</script>
